const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const theme = require('./package.json').theme;

module.exports = {
  entry: {
    main: './src/index.js',
    /**
     * 将第三方库(library)（例如 lodash 或 react）提取到单独的 vendor chunk 文件中
     * 它们很少像本地的源代码那样频繁修改。因此通过实现以上步骤，利用客户端的长效缓存机制，可以通过命中缓存来消除请求，并减少向服务器获取资源，同时还能保证客户端代码和服务器端代码版本一致
     */
    vender: [
        'react', 'react-router-dom', 'react-dom', 'lodash', 
        'redux', 'react-redux', 'antd-mobile', 'redux-saga',
        'weixin-js-sdk', 'cos-js-sdk-v5', 'moment'
    ]
  },
  output: {
    //chunkhash确保浏览器获取到修改后的文件
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  plugins: [
    // new CleanWebpackPlugin(['dist']),
    // 自动引入静态资源到相应 html 页面
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: path.join(__dirname, 'public/index.html')
    }),
    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor'
    }),
    new webpack.optimize.CommonsChunkPlugin({
        name: 'runtime'
    })
  ],
  module: {
    rules: [
        {
            test: /\.(png|svg|jpg|gif)$/,
            use: [
                'file-loader'
            ]
        },
        {
            // 'transform-runtime' 插件告诉 babel 要引用 runtime 来代替注入。
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                // options: {
                //     presets: ['babel-preset-env', 'babel-preset-react'],
                //     plugins: ['babel-plugin-transform-runtime']
                // }
            }
        },
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader',
                'postcss-loader'
            ]
        },
        {
            test: /\.less$/,
            use: [{
                loader: "style-loader"
            }, {
                loader: "css-loader"
            }, {
                loader: "less-loader", options: {
                    noIeCompat: true,
                    modifyVars: theme
                }
            }],
        },
    ]
},
resolve: {
    alias: {
        pages: path.join(__dirname, 'src/pages'),
        components: path.join(__dirname, 'src/components'),
        route: path.join(__dirname, 'src/route'),
    }
}
};